<template>
    <div class="myHouseList">
        <el-table :data="houseInfo"
            border 
            class="table"
            ref="tableRef"
            header-cell-class-name="table-header">
            <el-table-column prop="house_type" label="房屋类型"></el-table-column>
            <el-table-column prop="house_livenum" label="居住人数"></el-table-column>
            <el-table-column prop="house_rent" label="租金"></el-table-column>
            <el-table-column prop="house_address" label="房屋地址"></el-table-column>
            <el-table-column prop="house_state" label="当前状态">
                <template slot-scope="scope" >
                    <el-select v-model="scope.row.house_state" placeholder="选择状态" @change="updateHouseState(scope.row)">
                        <el-option 
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                        >
                        </el-option>
                    </el-select>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="danger" icon="el-icon-delete" circle 
                    :disabled="scope.row.house_state == 1?true:false"
                    @click="deleteThisHouse(scope.row)"></el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="insertMyhouse">
            <el-button  type="primary" round @click="insertMyHouse = true">添加我的房子</el-button>
        </div>
        
            <el-dialog title="添加新房子" :visible.sync="insertMyHouse">
                <el-form :model="insertForm" ref="insertForm" :rules="ruleInsertForm">
                    <el-form-item label="类型:">
                            <el-switch
                            v-model="insertForm.type"
                            active-text="单人房"
                            inactive-text="套房"
                            active-color="#13ce66"
                            inactive-color="#409EFF"
                            :active-value="1"
                            :inactive-value="2">
                            </el-switch>
                    </el-form-item>
                    <el-form-item>
                        <span>可居住人数</span>
                        <el-slider v-model="insertForm.livenum"
                        :min="1"
                        :max="5"
                        show-stops
                        ></el-slider>
                    </el-form-item>
                    <el-form-item label="房屋租金" prop="rent">
                        <el-input v-model.number="insertForm.rent" ></el-input>
                    </el-form-item>
                    <el-form-item label="地区选择">
                        <v-distpicker @selected="regionSelect" prop="regionAddress"></v-distpicker>
                    </el-form-item>
                    <el-form-item label="详细地址">
                        <el-input v-model="insertForm.address"></el-input>
                    </el-form-item>
                    <el-form-item label="房屋当前状态">     
                        <el-select v-model="insertForm.state" placeholder="选择状态">
                            <el-option 
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            >
                            </el-option>
                        </el-select>            
                    </el-form-item> 
                    <el-form-item>
                        <el-button type="primary" @click.native="insertMyHouseInfo('insertForm')">提交</el-button>
                        <el-button @click="restForm('insertForm')">取消</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
        <el-divider></el-divider>
        <div v-show="formVisable" class="repairForm">
            <el-form :model="repairForm" ref="repairForm">
                <el-form-item label="房屋地址">
                    <el-input v-model="repairForm.address" disabled></el-input>
                </el-form-item>
                <el-form-item label="维修原因">
                    <el-input v-model="repairForm.description"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitRepairForm">提交</el-button>
                    <el-button @click="formVisable = false">取消</el-button>
                </el-form-item>

            </el-form>
        </div>
    </div>
</template>
<script>
import changeMyHouse from '@/api/houseowner/changeMyHouse'
import VDistpicker from "v-distpicker";
export default{
    name:'changeMyHouse',
    components: {
        "v-distpicker":VDistpicker
    },
    data(){
        var checkRent = (rule,value,callback) =>{
            if (!value){
                return callback(new Error('租金未输入！！'))
            } else if (value <= 0){
                return callback(new Error('请输入正确数字!'))
            } else if(isNaN(value)){
                return callback('请输入数字');
            } else if (!Number.isInteger(parseFloat(value))) {
                return callback(new Error('请勿输入特殊字符'));
            } else {
                callback();
            }
        }
        return{
            name:'',
            houseInfo:[],
            editMyHouseChange:false,
            insertMyHouse:false,
            options:[{
                value:-1,
                label:'维修'
            },
            {
                value:0,
                label:'空闲'
            },{
                value:1,
                label:'已租'
            }],
            formVisable:false,
            repairForm:{
                address:'',
                description:''
            },
            value:null,
            insertForm:{
                type:1,
                livenum:1,
                rent:'',
                region: {
                    province: "",
                    city: "",
                    area:""
                },
                regionAddress:'',
                address:'',
                state:0
            },
            moneyforInsert:'',
            ruleInsertForm: {
                rent:[{validator:checkRent,trigger:'blur'}]
            }
        }
    },
    created(){
        this.getMyHouse()
    },
    methods:{
        getMyHouse(){
            var hphone = localStorage.getItem('owner_id')
            changeMyHouse.getMyHouse(hphone)
            .then(response=>{
                this.houseInfo = response.data
                var houseInfoDetailList = [];
                if (this.houseInfo){
                    this.houseInfo.forEach(u=>{
                        var type = '';
                        if (u.type === 1){
                            type = '单人房'
                        } else if (u.type === 2){
                            type = '套房'
                        };
                        var detail={
                            house_type:type,
                            house_livenum:u.livenum,
                            house_rent:u.rent,
                            house_address:u.address,
                            house_state:u.state
                        }
                        houseInfoDetailList.push(detail);
                    })
                    this.houseInfo = houseInfoDetailList
                    
                }
            })
        },
        updateHouseState(row){
            const data = {
                address:row.house_address,
                state:row.house_state
            }
            changeMyHouse.updateHouseState(data.address,data.state)
            .then(response=>{
                var msg = response.status
                if(msg === 200){
                    this.getMyHouse()
                    this.$message({
                        message:'操作成功',
                        center:true,
                        type:'success'
                    })
                } else {
                    this.$message({
                        message:'操作失败',
                        center:true,
                        type:'error'
                    })
                }
            })
            if (data.state === -1){
                localStorage.setItem('addressForRepair',row.house_address)
                this.repairForm.address = localStorage.getItem('addressForRepair')
                this.formVisable = true
            } else {
                this.formVisable = false
            }
        },
        submitRepairForm(){
            const data = {
                address:localStorage.getItem('addressForRepair'),
                description:this.repairForm.description
            }
            changeMyHouse.submitRepairForm(data.address,data.description)
            .then(response=>{
                var msg = response.status;
                if (msg === 200){
                    this.formVisable = false
                    this.$message({
                        message:'提交成功',
                        center:true,
                        type:'success'
                    })
                } else {
                    this.$message({
                        message:'提交失败',
                        center:true,
                        type:'error'
                    })
                }
            })
        },
        insertMyHouseInfo(form){
            if (this.insertForm.regionAddress === '' || this.insertForm.address === ''){
                this.$message({
                    message:'地区未选择',
                    center:true,
                    type:'error'
                })
            } else {
                this.getMoneyforInsert()
                var money = '添加成功，您需缴纳添加费用'+this.moneyforInsert+'元'
                var msg = this.insertForm.regionAddress + this.insertForm.address
                const data  = {
                    hphone:localStorage.getItem('owner_id'),
                    type:this.insertForm.type,
                    livenum:this.insertForm.livenum,
                    rent:this.insertForm.rent,
                    address:msg,
                    state:this.insertForm.state
                }
                changeMyHouse.insertMyHouseInfo(data.hphone,data.type,data.livenum,data.rent,data.address,data.state)
                .then(response => {
                    var msg = response.status
                    if (msg === 200){
                        this.$notify({
                            title: '成功',
                            message: money,
                            position: 'top-left',
                            duration: 1500,
                            type: 'success'
                        });
                        this.getMyHouse();
                    } else {
                        this.$notify.error({
                            title: '失败',
                            position: 'top-left',
                            duration: 1500,
                            message: '失败了'
                        });
                    }
                })
                
            }
            this.$refs[form].resetFields();
            this.insertMyHouse = false;
        },
        regionSelect(data){
            if (data.province === '' || data.city === '' || data.area === ''){
                this.insertForm.regionAddress = ''
            } else {
                var message = data.province.value+data.city.value+data.area.value
                this.insertForm.regionAddress = message
            }

        },
        restForm(form){
            this.$refs[form].resetFields();
            this.insertMyHouse = false;
        },
        getMoneyforInsert(){
            this.moneyforInsert = this.insertForm.rent/10  
        },
        deleteThisHouse(row){
            const data = {
                hphone:localStorage.getItem('owner_id'),
                address:row.house_address,
                livenum:row.house_livenum
            }
            changeMyHouse.deleteThisHouse(data.hphone,data.address,data.livenum)
            .then(response=>{
                var msg = response.status
                if (msg = 200){
                    this.$notify({
                        title: '成功',
                        message: '删除成功',
                        position: 'top-left',
                        duration: 1500,
                        type: 'success'
                    });
                    this.getMyHouse()
                } else {
                    this.$notify.error({
                        title: '失败',
                        position: 'top-left',
                        duration: 1500,
                        message: '失败了'
                    });
                }
            })
        }
    }
}
</script>
<style>
.repairForm{
    width: 900px;
    text-align: center;
    margin: 0 auto;
}
.insertMyhouse{
    display: block;
    text-align: center;
    margin-top: 10px;
}
</style>
